<template>
  <div class="app-container">
    <el-row >
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple">
          <el-card class="box-card" align="middle">
            <div>
              <span style="font-weight:bold">注册API总数</span>
              <span style="display: block;padding-top: 30px;font-size:xx-large">{{ topValue.regApiCount }}</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle">
              <div>
                <span style="font-weight:bold">发布API接口数量</span>
                <span style="display: block;padding-top: 30px;font-size:xx-large">{{topValue.pubApiCount}}</span>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle">
              <div>
                <span style="font-weight:bold">API调用总次数</span>
                <span style="display: block;padding-top: 30px;font-size:xx-large">{{ topValue.callApiTimes}}</span>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle">
              <div>
                <span style="font-weight:bold">API调用成功率</span>
                <span style="display: block;padding-top: 30px;font-size:xx-large; color: red">{{topValue.callSuccessPer}}%</span>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle">
              <div>
                <span style="font-weight:bold">API资源发布统计趋势分析</span>
              </div>
              <ve-line :data="chartData"></ve-line>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle">
              <div>
                <span style="font-weight:bold">资源调用变化趋势分析</span>
              </div>
              <div>
                <ve-line :data="chartData1"></ve-line>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple">
          <el-card class="box-card" align="middle" style="height: 300px">
            <div style="padding-bottom: 10px">
              <span style="font-weight:bold;">资源目录统计</span>
            </div>
            <div>
              <el-table
                :data="tableDataml"
                :show-header="false"
                style="width: 100%">
                <el-table-column
                  prop="no"
                  label="no"
                  width="10%">
                </el-table-column>
                <el-table-column
                  prop="metric"
                  label="metric"
                  width="70%">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="count"
                  width="20%">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle" style="height: 300px">
              <div style="padding-bottom: 10px">
                <span style="font-weight:bold;">行业资源占比</span>
              </div>
              <div>
                <el-table
                  :data="tableDatahy"
                  :show-header="false"
                  style="width: 100%">
                  <el-table-column
                    prop="no"
                    label="no"
                    width="10%">
                  </el-table-column>
                  <el-table-column
                    prop="metric"
                    label="metric"
                    width="70%">
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="count"
                    width="20%">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle" style="height: 300px">
              <div style="padding-bottom: 10px">
                <span style="font-weight:bold;">申请资源数量排名</span>
              </div>
              <div>
                <el-table
                  :data="tableDatasq"
                  :show-header="false"
                  style="width: 100%">
                  <el-table-column
                    prop="no"
                    label="no"
                    width="10%">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="metric"
                    label="metric"
                    width="70%">
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="count"
                    width="20%">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="el-col-style">
        <div class="grid-content bg-purple-light">
          <div class="grid-content bg-purple">
            <el-card class="box-card" align="middle" style="height: 300px">
              <div style="padding-bottom: 10px">
                <span style="font-weight:bold;">使用资源数量排名</span>
              </div>
              <div>
                <el-table
                  :data="tableDatasy"
                  :show-header="false"
                  style="width: 100%">
                  <el-table-column
                    prop="no"
                    label="no"
                    width="10%">
                    <template slot-scope="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="metric"
                    label="metric"
                    width="70%">
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="count"
                    width="20%">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<style>
  .el-col-style{
    padding: 10px;
  }
</style>
<script>
  import {mapActions} from "vuex";
  import { listDataApi} from '@/api/market/dataapi'
  import { pageApiLog } from '@/api/market/apilog'

  //import util from "@/libs/util";
  // const echarts = require('echarts');
  //import * as echarts from "echarts";
  export default {

    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          apiName: ''
        },
        monitorDataList: [],
        dialogSourceVisible:false,
        chartData: {
          columns: ['日期', '发布次数'],
          rows: [
            { '日期': '1/1', '发布次数': 1393  },
            { '日期': '1/2', '发布次数': 3530 },
            { '日期': '1/3', '发布次数': 2923  },
            { '日期': '1/4', '发布次数': 1723 },
            { '日期': '1/5', '发布次数': 3792 },
            { '日期': '1/6', '发布次数': 4593 }
          ]
        },chartData1: {
          columns: ['日期', '调用次数'],
          rows: [
            { '日期': '1/1', '调用次数': 245  },
            { '日期': '1/2', '调用次数': 344 },
            { '日期': '1/3', '调用次数': 267  },
            { '日期': '1/4', '调用次数': 355 },
            { '日期': '1/5', '调用次数': 303 },
            { '日期': '1/6', '调用次数': 221 }
          ]
        },
        tableDataml: [],
        tableDatahy: [],
        tableDatasq: [],
        tableDatasy: [],
        monitorIndexOptions:[],
        topValue:{
          regApiCount:"120",
          callApiTimes:"1",
          callApiSuccessTimes:1,
          pubApiCount:"2",
          callSuccessPer:"95%"
        },
        apiOptions:[]
      }
    },
    created() {
      this.getDataApiList();
      this.getApiLogList();
    },

    mounted() {
      let _self = this;
    },
    methods: {
      getDataApiList() {
        listDataApi().then(response => {
          if (response.success) {
            this.apiOptions = response.data
            this.topValue.regApiCount = response.data.length
            response.data.forEach(log =>{
              if( log.status == '2'){
                this.topValue.pubApiCount++;
              }
            })
          }
        })
      },
      /** 查询日志列表 */
      getApiLogList() {
        pageApiLog(this.queryParams).then(response => {
          this.callApiSuccessTimes = 0;
          if (response.success) {
            this.topValue.callApiTimes = response.data.total
            response.data.data.forEach(log =>{
              if( log.status == '1'){
                this.callApiSuccessTimes++;
              }
            })
            var checkResult = Number(this.callApiSuccessTimes )/Number( this.topValue.callApiTimes)*100;
            this.topValue.callSuccessPer = checkResult.toFixed(2);
          }

        })
      },
    }

  }
</script>
